<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">

          <el-form :inline="true" :model="filters">
            <el-form-item >
              <el-tag type="info" style="height: 30px;line-height: 30px;">执行器</el-tag>
              <el-select size="medium" @change="handleJobGroupChange" v-model="filters.jobGroup">
                  <el-option v-for="item of filters.jobGroupOptions" :key="item.value"
                          :label="item.label" :value="item.value"></el-option>         
              </el-select>
            </el-form-item>

            <el-form-item >
              <el-tag type="info" style="height: 30px;line-height: 30px;">JobID</el-tag>
              <el-select size="medium" v-model="filters.jobId">
                <el-option v-for="item of filters.jobIdOptions" :key="item.value"
                          :label="item.label" :value="item.value"></el-option> 
              </el-select>
            </el-form-item >        
            
            <el-form-item >
              <el-tag type="info" style="height: 30px;line-height: 30px;">状态</el-tag> 
              <el-select size="medium" v-model="filters.logStatus">
                <el-option label="全部" value="-1"></el-option> 
                <el-option label="成功" value="1"></el-option>
                <el-option label="失败" value="2"></el-option> 
                <el-option label="进行中" value="3"></el-option>          
              </el-select>
            </el-form-item> 
        
            <el-form-item >
              <el-tag type="info"style="height: 30px;line-height: 30px;">调度时间</el-tag>
              <el-date-picker size="medium" type="datetimerange" align="right"
              start-placeholder="开始日期" end-placeholder="结束日期"
              :default-time="['12:00:00', '08:00:00']" v-model="filters.logTime"></el-date-picker>
            </el-form-item>
 
            <el-form-item>
              <el-button type="primary" @click="search" size="medium">查询</el-button>            
              <el-button  type="danger" @click="showRemoveDialog" size="medium">清理</el-button>
            </el-form-item>
          </el-form>
        </el-col>

      <!--列表-->
      <el-table :data="datalist" highlight-current-row v-loading="loading" stripe style="width: 100%;">
        <el-table-column prop="jobId" label="任务ID" min-width="5%">
        </el-table-column>
        <el-table-column prop="jobGroup" label="jobGroup" min-width="8%">
        </el-table-column>
        <el-table-column prop="triggerTime" label="调度时间" :formatter="formatTriggerTime" min-width="10%">
        </el-table-column>
        <el-table-column prop="triggerCode" label="调度结果" :formatter="formatTriggerCode" min-width="10%">
        </el-table-column>

        <el-table-column   label="调度备注" min-width="10%">
          <template slot-scope="scope">
            <el-button type="text" @click="open(scope.$index,scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="handleTime" label="执行时间" min-width="10%">
        </el-table-column>
        <el-table-column prop="handleCode" label="执行结果" :formatter="formatHandleCode" min-width="10%">
        </el-table-column>
        <el-table-column prop="handleMsg" label="执行备注" min-width="10%">
        </el-table-column>
        <el-table-column prop="opt" label="操作" min-width="10%">
<!--           <template slot-scope="scope">
             <el-button type="primary"
            @click="showEditDialog(scope.$index,scope.row)" size="mini" round>编辑</el-button>
            <el-button type="danger" 
            @click="delItem(scope.$index,scope.row)" size="mini" round>删除</el-button>
          </template> -->
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="length"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordsTotal">
        </el-pagination>
      </el-col>

    <!--清理日志-->
      <el-dialog title="删除日志" :visible.sync ="removeFormVisible" :close-on-click-modal="false">
        <el-form :model="removeForm" label-width="100px" :rules="removeFormRules" ref="removeForm">
          <el-form-item label="执行器" prop="jobGroup">
              <el-select size="medium"  v-model="removeForm.jobGroup" disabled>
                <el-option v-for="item of removeForm.jobGroupOptionsRemove" :key="item.value"
                          :label="item.label" :value="item.value"></el-option>         
              </el-select>
          </el-form-item>
          <el-form-item label="任务" prop="jobId">
              <el-select size="medium" v-model="removeForm.jobId" disabled>
                <el-option v-for="item of removeForm.jobIdOptionsRemove" :key="item.value"
                          :label="item.label" :value="item.value"></el-option> 
              </el-select>
          </el-form-item>
          <el-form-item label="清理方式" prop="type">
            <el-select size="medium" v-model="removeForm.type">
                <el-option label="清理一月之前" value="1"></el-option> 
                <el-option label="清理二月之前" value="2"></el-option> 
                <el-option label="清理三月之前" value="3"></el-option> 
              </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="removeFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="removeSubmit">提交</el-button>
        </div>
      </el-dialog>

    </el-col>
  </el-row>
</template>

<script>
  //import util from '../../common/util'
  import moment from 'moment'
  import API from '../../api/api_log';
  import qs from 'qs'
  export default {
    data() {
      return {
        filters: {
          jobGroupOptions:[{
            label:"全部",
            value:"0",
            }],
          jobIdOptions:[{
            label:"全部",
            value:"0",
            }],
          jobGroup: '0',
          jobId: '0',
          logStatus: '-1',
          filterTime: '',
          logTime:[],
        },        
        loading: false,
        datalist: [],
        start: 0,
        length: 10,
        currentPage4: 4,
        recordsTotal: 0,


        removeFormVisible: false,//删除界面是否显示
        removeLoading: false,
        removeFormRules: {
          jobGroup: [
            {required: true, message: '请输入执行器', trigger: 'blur'}
          ],
          jobId: [
            {required: true, message: '请输入任务', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请输入清理期间', trigger: 'blur'}
          ],

        },
        removeForm: {
          jobGroupOptionsRemove:[],
          jobIdOptionsRemove:[],
          jobGroup: '',
          jobId: '',
          type:''
        },

      }
    },
    methods: {
      handleSearch(){
        this.getJobGroup()
        this.filters.logTime=[new Date(new Date().setDate(new Date().getDate()-1)) , new Date()]
        // this.filters.jobGroup=this.$store.state.joblogInput.jobGroup;
        // this.handleJobGroupChange()
        
      },
      //获取用户列表
      search: function () {
      let that = this;
      let params = {
        start: that.start,
        length: that.length,
        jobGroup: that.filters.jobGroup,
        jobId: that.filters.jobId,
        logStatus: that.filters.logStatus,
        filterTime: moment(that.filters.logTime[0]).format("YYYY-MM-DD HH:mm:ss")+" - "+moment(that.filters.logTime[1]).format("YYYY-MM-DD HH:mm:ss"),
      };
      console.log(params)
      that.loading = true;
      API.findList(qs.stringify(params)).then(function (result) {
        that.loading = false;
        // console.log(result)
        if (result && result.data) {
          that.recordsTotal = result.recordsTotal;
          that.datalist = result.data;
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      }); 
      },
      getJobGroup(){
        let that=this
        API.findGroups().then(function (result) {
         if (result && result.JobGroupList) {
          that.filters.jobGroupOptions=[];
          that.filters.jobGroupOptions.push({
            label:"全部",
            value:"0",
          })
          for(let item of result.JobGroupList){
            // console.log(item)
            let ob={
              label:item.title,
              value:item.id
            }
            that.filters.jobGroupOptions.push(ob)
          }
          that.filters.jobGroup=that.$store.state.joblogInput.jobGroup;
          console.log( that.filters.jobGroup)
          that.handleJobGroupChange()
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      }); 
      },

      handleJobGroupChange(){
        let that=this
        console.log(that.filters.jobGroup+"hehe")
        let para={
          jobGroup:that.filters.jobGroup
        }
        API.findJobsByGroup(qs.stringify(para)).then(function (result) {
         if (result && result.content) {
          that.filters.jobIdOptions=[];
          that.filters.jobIdOptions.push({
            label:"全部",
            value:"0",
          })
          let haslabel=false
          for(let item of result.content){
            let ob={
              label:item.jobDesc,
              value:item.id
            }
            if(ob.value==that.$store.state.joblogInput.jobId){
              haslabel=true
            }
            that.filters.jobIdOptions.push(ob)
          }
          if(haslabel){
            that.filters.jobId=that.$store.state.joblogInput.jobId
          }else{
            that.filters.jobId="0"
          }
          
          console.log(that.filters.jobId)
          that.search();
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      }); 
      },
      formatTriggerTime: function (row, column) {
        //row.triggerTime?util.formatDate.format(new Date(row.triggerTime)):"";        
        return row.triggerTime?moment(new Date(row.triggerTime)).format("YYYY-MM-DD HH:mm:ss"):"";
      },
      formatTriggerCode: function (row, column) {      
        return row.triggerCode=="200"?"成功":row.triggerCode=="500"?"失败":"未知";
      },
      formatHandleCode: function (row, column) {
        var  res=""
        if(row.handleCode==200){
          res="成功"
        }else if(row.handleCode==500){
          res="失败"
        }else if(row.handleCode==501){
          res="失败2"
        }
        return res
      },
      open(index, row) {
        this.$alert(row.triggerMsg,{dangerouslyUseHTMLString: true,center: true});
        // this.$notify({
        //   dangerouslyUseHTMLString: true,
        //   message: row.triggerMsg
        // });
      },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.length=val,
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.start=(val-1)*this.length,
      this.search();
    },
      delBook: function () {
        console.log("batchDeleteBook");
      },
      batchDeleteBook: function () {
        console.log("batchDeleteBook");
      },
      showRemoveDialog: function () {
        this.removeFormVisible = true;
        this.removeForm = {
          jobGroupOptionsRemove:this.filters.jobGroupOptions,
          jobIdOptionsRemove:this.filters.jobIdOptions,          
          jobGroup: this.filters.jobGroup,
          jobId: this.filters.jobId,
          type:'3'
        };
      },
      //删除日志
      removeSubmit: function () {
        let that = this;
        this.$refs.removeForm.validate((valid) => {
          if (valid) {
            that.loading = true;
            let para = Object.assign({}, this.removeForm);
            API.remove(qs.stringify(para)).then(function (result) {
              that.loading = false;
              if (result && result.code ==200) {
                that.$message.success({showClose: true, message: '删除成功', duration: 2000});
                that.$refs['removeForm'].resetFields();
                that.removeFormVisible = false;
                that.search();
              } else {
                that.$message.error({showClose: true, message: '删除失败', duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });

          }
        });
      },

    },
    mounted() {
 
      this.handleSearch()
    }
  }
</script>


<style scoped>
  .el-select{
    width:100px;
  }
</style>
